<template>
	<view style="overflow: hidden;">
    <el-form size="mini" label-width="110px" label-position="left" :class="{'form-disable':isView}">
      <el-row :gutter="10">
        <el-col :span="7">
          <el-form-item label="档案上传方式" label-width="100px">
            <view>自动上传</view>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上传时间" label-width="80px">
            <view>2022年02月21日12:00:00</view>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" size="mini" class="view-btn" v-if="isView" @click="isView = false">编辑</el-button>
      <el-button type="primary" size="mini" class="view-btn" v-else @click="isView = true">保存</el-button>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="房源信息" name="houseInfo">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="小区名称">
                <el-input v-model="houseInfo.communityName" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属街道">
                <el-input v-model="houseInfo.street" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房号">
                <el-input v-model="houseInfo.houseNo" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="面积">
                <el-input v-model="houseInfo.hoseArea" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房间数">
                <el-input v-model="houseInfo.houseNum" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="适配状态">
                <el-input v-model="houseInfo.houseStatus" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产权证号">
                <el-input v-model="houseInfo.propertyNo" :readonly="isView"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="安置人信息" name="peopleInfo">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="准购证(选房序号)">
                <el-input v-model="houseInfo.buyNo" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选房日期">
                <el-input v-model="houseInfo.selectDate" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属拆迁项目">
                <el-input v-model="houseInfo.dismProjectName" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拆迁年度">
                <el-input v-model="houseInfo.dismYear" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被拆迁人">
                <el-input v-model="houseInfo.dismName" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被拆迁人身份证号" label-width="110px">
                <el-input v-model="houseInfo.dismCardNo" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拆迁协议">
                <el-link type="primary" size="mini" :href="houseInfo.dismAgent" v-if="isView">点击下载</el-link>
                <el-link type="primary" v-else-if="houseInfo.dismAgent" @click="openUploadDialog(1)">修改附件</el-link>
                <el-link type="primary" v-else @click="openUploadDialog(1)">上传附件</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选房确认单">
                <el-link type="primary" :href="houseInfo.selectOrder" v-if="isView">点击下载</el-link>
                <el-link type="primary" v-else-if="houseInfo.selectOrder" @click="openUploadDialog(2)">修改附件</el-link>
                <el-link type="primary" v-else @click="openUploadDialog(2)">上传附件</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购房人">
                <el-input v-model="houseInfo.buyUser" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-table
                  :data="houseInfo.dismUserList"
                  style="width: 100%">
                <el-table-column
                    prop="name"
                    label="安置人姓名"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    prop="cardNo"
                    label="身份证号"
                    min-width="180">
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="手机号"
                    min-width="120">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="建设项目信息" name="projectInfo">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目名称">
                <el-input v-model="houseInfo.projectName" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目地址">
                <el-input v-model="houseInfo.projectAddr" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建议方式">
                <el-input v-model="houseInfo.createMethod" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设单位">
                <el-input v-model="houseInfo.createCompany" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="竣工备案时间">
                <el-input v-model="houseInfo.successDate" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交付时间">
                <el-input v-model="houseInfo.deliveryDate" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设类别">
                <el-input v-model="houseInfo.createType" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设成本">
                <el-input v-model="houseInfo.createCost" :readonly="isView"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="购房信息" name="buyInfo">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="签约时间">
                <el-input v-model="houseInfo.singDate" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同金额">
                <el-input v-model="houseInfo.contractAmount" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="甲方">
                <el-input v-model="houseInfo.partA" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="乙方">
                <el-input v-model="houseInfo.partB" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同到期时间">
                <el-input v-model="houseInfo.contractEndDate" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同附件">
                <a class="down-link" target="_blank" :href="houseInfo.contractFile" v-if="isView"><span>点击下载</span></a>
                <el-link type="primary" v-else-if="houseInfo.contractFile" @click="openUploadDialog(3)">修改附件</el-link>
                <el-link type="primary" v-else @click="openUploadDialog(3)">上传附件</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车位">
                <el-input v-model="houseInfo.catNo" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车位单价">
                <el-input v-model="houseInfo.catPrice" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="贮藏室">
                <el-input v-model="houseInfo.storeRoom" :readonly="isView"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="贮藏室价格">
                <el-input v-model="houseInfo.storeRoomPrice" :readonly="isView"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <el-dialog ref="uploadDialog" :modal="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="uploadDialogVisble" title="上传附件" width="30%">
      <view class="upload-box">
        <view class="upload-item">
          <el-upload
              ref="uploadAgreement"
              :action="uploadUrl"
              :data="{ name: 'demolitionAgreement', type: 1 }"
              :http-request="uploadSuccess"
              :limit="1"
              :accept="fileAccept"
              class="btn upload-btn"
          >
            <el-row  slot="trigger">
              <el-col :span="22">
                <el-input size="small" disabled />
              </el-col>
              <el-col :span="2">
                <el-button size="small" type="primary">选择文件</el-button>
              </el-col>
              <el-col :span="24">
                <view v-if="demolitionAgreement &&demolitionAgreement > 0">
                  <text>{{ demolitionAgreement || '' }}</text>
                  <text style="padding: 0 5px;color: blue;cursor: pointer;" @click.stop="deleteAttachment(1)">删除</text>
                </view>
              </el-col>
            </el-row>
          </el-upload>
        </view>
      </view>
      <div slot="footer" class="dialog-footer"><el-button size="small" type="primary" @click="submitUpLoad">确认提交</el-button></div>
    </el-dialog>
	</view>
</template>

<script>
import {
  deleteAttachment,
  confirmUploadAttachment,
} from '@/common/services/house.js';
	export default {
    name: 'HouseView',
		data() {
			return {
				activeTab: 'houseInfo',
        houseInfo: {
          communityName: '锦南人家一期',
          street:'林珑街道',
          houseNo:'1-301',
          hoseArea: '89m²',
          houseNum: 2,
          houseStatus: '已选配',
          propertyNo: '111111111',
          // 被拆迁人
          buyNo: '501',
          selectDate: '2022年6月10日',
          dismProjectName: '牧松线项目',
          dismYear: '2021年',
          dismName: '张三',
          dismCardNo: '3301412198909091123',
          dismAgent: 'https://www.baidu.com',
          selectOrder: 'https://www.baidu.com',
          buyUser: '向大牛',
          dismUserList: [
            {name: '向大牛', cardNo: '3301412198909091123', mobile: '13877906288'},
            {name: '向大牛', cardNo: '3301412198909091123', mobile: '-'}
          ],
          // 建设项目信息
          projectName: 'XXX项目',
          projectAddr: '浙江省杭州市临安区青山湖街道XX路188号',
          createMethod: '新建',
          createCompany: '杭州市临安区经济适用住房开发有限公司',
          successDate: '2014年12月25日',
          deliveryDate: '2018年11月28日',
          createType: '新供应国有建设用地建设',
          createCost: 450000,
          // 合同信息
          singDate: '2005年01月01日',
          contractAmount: 680000,
          partA: 'XXX',
          partB: 'XXX',
          contractEndDate: '2022年01月01日',
          contractFile: 'https://www.baidu.com',
          catNo: '8-0376',
          catPrice: 118000,
          storeRoom: '12-224',
          storeRoomPrice: '13100'
        },
        tableData: [],
        isView: true,
        uploadDialogVisble: false,
        demolitionAgreement: '',
        confirmSheet: '',
        housePurchasingContract: '',
        pageIndex: '',
        searchData: '',
        uploadUrl: 'http://localhost:8022/house/importFile',
        batchNo: '',
        fileAccept: '.png,.jpg,.jpeg,.pdf',
        type: '1'
			}
		},
		methods: {
      handleTabClick(tab, event) {},
      handLeFileUpload(data) {
        let self = this;
        this.uploadDialogVisble = true
      },
      deleteAttachment(index) {
        let self = this;
        this.$confirm('确定要删除这条附件文件吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAttachment(self.currentId, type).then(ret => {
            if (type === 1) {
              self.houseInfo.demolitionAgreement = '';
            }
            if (type === 2) {
              self.houseInfo.confirmSheet = '';
            }
            if (type === 3) {
              self.houseInfo.housePurchasingContract = '';
            }
          });
        });
      },
      submitUpLoad() {
        let self = this;
        let data = {
          id: this.currentId,
          files: this.fileUrl
        };
        confirmUploadAttachment(data).then(ret => {
          self.uploadDialogVisble = false;
          // self.onSearch();
          self.list({
            current: self.pageIndex,
            ...self.searchData
          });
          self.$refs.uploadAgreement.clearFiles();
          self.$refs.uploadConfirm.clearFiles();
          self.$refs.uploadContract.clearFiles();
        });
      },
      openUploadDialog(type){
        this.uploadDialogVisble = true
      },
      uploadSuccess(res) {
        let self = this;
        self.batchNo = '';
        self.$utils.loading();
        let url = `${self.$env.base}/house/importFile/${this.type}`;
        let sourceType = 0;
        if (res.data) {
          sourceType = res.data.type;
          url = `${self.$env.base}/house/importFile/attachment/${sourceType}/${this.type}`;
        }
        uni.uploadFile({
          url: url,
          file: res.file,
          name: 'file',
          header: {
            Authorization: uni.getStorageSync('token') || ''
          },
          success: ret => {
            // self.$refs.uploadExcel.clearFiles();
            self.$utils.loading(true);
            let data = JSON.parse(ret.data);
            if (ret.statusCode == 200 && data.code === self.$env.successCode) {
              self.$utils.notify('文件[' + res.file.name + ']上传成功。');
              if (sourceType === 0) {
                self.batchNo = data.data;
                self.list({ batchNo: self.batchNo, confirm: 0 }, true);
              } else {
                self.fileUrl.push({
                  sourceType: sourceType,
                  url: data.data
                });
              }
            } else {
              self.$utils.notify('文件[' + res.file.name + ']上传失败!' + data.errMsg || '', 'error');
            }
          },
          fail: err => {
            // self.$refs.uploadExcel.clearFiles();
            self.$utils.loading(true);
            self.$utils.notify('文件[' + res.file.name + ']上传失败!', 'error');
          }
        });
      }
		}
	}
</script>

<style>

</style>
